<template>
  <transition name="dialog-fade">
    <div class="sign-board" v-show="showSignboard">
      <div class="sign-header">
        <span class="el-dialog__title">{{ title }}</span>
        <button
          type="button"
          class="el-dialog__headerbtn"
          @click="handleClose">
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </button>
      </div>
      <div class="sign-board-btn">
        <!--<el-input class="m-input-width" type="text" v-model="name"></el-input>-->
        <el-button type="primary" @click="canvasClear">重写</el-button>
        <el-button type="primary" @click="canvasDownTap">完成</el-button>
      </div>
      <canvas
        id="canvas"
        width="800"
        height="400"
        class="canvas"
        @mousedown="canvasDown($event)"
        @mousemove="canvasMove($event)"
        @mouseup="canvasUp($event)"
        @mouseleave="canvasLeave($event)"
        ref="canvas"
      ></canvas>
    </div>
  </transition>
</template>

<script>
import {uploadBase64} from "@/api/filecenter/info.js";

export default {
  name: "SignBoard",
  props: {
    showSignboard: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "签名"
    }
  },
  data() {
    return {
      name: ""
    }
  },
  computed: {},
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas;//指定canvas
      this.ctx = this.canvas.getContext("2d");//设置2D渲染区域
      this.ctx.lineWidth = 3;//设置线的宽度
    },
    canvasDown(e) {
      this.canvasMoveUse = true;
      const canvasX = e.clientX - e.target.offsetLeft;
      const canvasY = e.clientY - e.target.offsetTop + document.documentElement.scrollTop;
      this.ctx.beginPath(); // 移动的起点
      this.ctx.moveTo(canvasX, canvasY);
    },
    canvasMove(e) {
      if (this.canvasMoveUse) {
        // 只有允许移动时调用
        const t = e.target;
        let canvasX;
        let canvasY;
        canvasX = e.clientX - t.offsetLeft;
        canvasY = e.clientY - t.offsetTop + document.documentElement.scrollTop;
        this.ctx.lineTo(canvasX, canvasY);
        this.ctx.stroke();
      }
    },
    canvasUp(e) {
      this.canvasMoveUse = false;
    },
    canvasLeave(e) {
      this.canvasMoveUse = false;
    },
    canvasClear() {
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    },
    canvasDownTap() {
      let that = this;
      let _src = that.$refs.canvas.toDataURL("image/png");
      uploadBase64({
        imageBase: _src
      }).then(function (res) {
        that.canvasClear();
        that.$emit("canvasDown", res.data.data.path);
      });
      // HttpConnection.post(that.Api.uploadBase64, {
      //   imageBase: _src,
      // }).then(function (res) {
      //   that.canvasClear();
      //   that.$emit("canvasDown", res.data.relativePath);
      // });
    },
    handleClose() {
      this.$emit("canvasClose");
    }
  }
}
</script>

<style scoped lang="scss">
.sign-board {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sign-header {
  width: 800px;
  background-color: #ffffff;
  position: relative;
  padding: 20px 20px 10px 20px;
  box-sizing: border-box;
}

.sign-board-btn {
  width: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 20px 20px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}

.canvas {
  background-color: #ffffff;
}
</style>
